<template>
    <div id="root">
        <Top><p>重置密码</p></Top>
        <van-cell-group>
            <van-field v-model="name" placeholder="账号"/>
            <van-field v-model="passwd"  center clearable placeholder="旧密码"/>
            <van-field v-model="passwd2"   center clearable placeholder="新密码"/>
            <van-field v-model="passwd3" center clearable placeholder="确认新密码"/>
            <van-field v-model="code"  center clearable placeholder="验证码">
                <template #right-icon>
                    <div class="input-img">
                        <img :src="src" alt="">
                        <div class="right-p1" @click="code1"><p>看不清</p>
                            <p class="right-p2">换一张</p></div>
                    </div>
                </template>
            </van-field>
        </van-cell-group>
        <van-button type="primary" block @click="ok()">确认</van-button>
        <Tan>
            <p>{{p}}</p>
        </Tan>
    </div>
</template>

<script>
    import Top from "./Top";
    import qs from "../../node_modules/querystring"
    import Tan from "./Tan";
    export default {
        name: "Changepassword",
        components: {Tan, Top},
        created() {
            this.code1()
        },
        methods: {
            //验证码
            code1() {
                this.axios.post("https://elm.cangdu.org/v1/captchas").then((data) => {
                    this.src = data.data.code;
                }).catch(error => {
                    console.log(error);
                });
            },
            ok(){
                if (this.passwd3==this.passwd2){
                this.axios.post("https://elm.cangdu.org/v2/changepassword",qs.stringify({
                    username:this.name ,
                    oldpassWord:this.passwd,
                    newpassword:this.passwd2,
                    confirmpassword:this.passwd3,
                    captcha_code:this.code
                })).then(data=>{
                    console.log(data.data)
                    if (data.data.success=="密码修改成功"){
                        this.p=data.data.success;
                        this.$store.commit("clicktan",true);
                    }else {
                        this.p=data.data.message;
                       this.$store.commit("clicktan",true);
                    }
                }).catch(err=>{
                    console.log(err);
                })
                }else {
                    this.p="两次输入的密码不一致";
                   this.$store.commit("clicktan",true);
                }
            },
            // tan(){
            //     this.$store.commit("clicktan",true);
            // }
        },
        data() {
            return {
                name: "",
                passwd: "",
                passwd2: "",
                passwd3: "",
                code: "",
                src:"",
                msg:false,
                p:''
            }
        },
    }
</script>

<style scoped>
    #root {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #f5f5f5;
        z-index: 999;
    }
    .input-img{
        /*background-color: #ffd930;*/
        display: flex;
        font-size: 6px;
    }
    .right-p2{
        color: #3190e8;
    }
</style>